<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> 投诉详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <el-descriptions title="用户信息" column="1" border="true">
        <el-descriptions-item label="投诉人住址">{{complaint.address}}</el-descriptions-item>
        <el-descriptions-item label="投诉信息">{{complaint.body}}</el-descriptions-item>
        <el-descriptions-item label="投诉日期">{{complaint.date}}</el-descriptions-item>
        <el-descriptions-item label="相关图片">
          <el-row :gutter="20">
            <el-col :span="24" v-for="img in complaint.complaintImgs">
              <el-image :src="img.imgUrl"></el-image>
            </el-col>
          </el-row>
        </el-descriptions-item>
      </el-descriptions>


    </div>
  </div>
</template>

<script>
  export default {
    name: "complaint-desc",
    data() {
      return {
        complaint: {}
      }
    },
    methods: {
      getComplaintById() {
        this.$axios.get("/complaint/" + this.complaint.id).then(res => {
          if (res.data.code == 200) {
            this.complaint = res.data.obj;
            console.log(this.complaint);
          }
        })
      }
    },
    created() {
      console.log(1);
      this.complaint.id = this.$route.params.id;
      this.getComplaintById();
    }
  }
</script>

<style scoped>

</style>